<%@page import="java.sql.*"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" errorPage="error.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		h1{
			color:red;
			text-align: center; /* 文本对齐方式 */ 	
		}
		.content{
			border: 3px solid red;
			display: flex; /* 弹性布局 */
			flex-direction: row; /* 主轴方向默认值就是row */
			gap: 10px; /* 容器内各个元素间的间距 */
			padding: 10px; /* 容器内边距 */
		}
		.column{
			border: 1px solid gray;
			white-space: nowrap; /* 一行文本不换行 */
			padding: 10px; /* 容器内边距 */
			flex-grow: 1; /* 默认值是0，有空地方都不占 */
			text-align: left; /* 文本的对齐方式 */
		}
		a{
			color: gray;
			text-decoration: none; /* 文本修饰 */
		}
		a:hover{ /* 鼠标悬停在超链接上时 */
			color: red;
			text-decoration: underline;
		}
	</style>
	<title>分页显示成语</title>
</head>
<body>
<h1>分页显示成语</h1><% 
String stringPage=request.getParameter("page"); //获取传递过来的参数
if(stringPage==null)stringPage="1";//若没有指明页码，默认就看第一页
//out.println(stringPage);
int currentPage= Integer.parseInt(stringPage); //当前页码
int n=25; //当前页码左边及右边超链接的个数，两边都有n个超链接
int columnCount=10; //页面显示成语的列数
int chengyuCountPerColumn=20; //每一列成语的个数
int pageSize=columnCount*chengyuCountPerColumn;//每个页面显示成语的个数
int total=0; //数据库中成语的总数
Class.forName("com.mysql.cj.jdbc.Driver");
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db", "root", "12qwas");
		Statement st=cn.createStatement();
		ResultSet rs=st.executeQuery("select count(*) from chengyu");
	){
	rs.next();
	total= rs.getInt(1);
}
int maxPage=total/pageSize+(total%pageSize!=0?1:0); //最大的页码值
// out.println("总的页面数="+maxPage);
if(currentPage<1)currentPage=1; //控制当前页码应该在正确的范围内
else if(currentPage>maxPage)currentPage=maxPage;
// out.println("当前页码="+currentPage);
int begin=currentPage-n; //第一个页码的值
int over=currentPage+n;//最后一个页码超链接的值
if(begin<1){
	over-=begin-1;
	if(over>maxPage)over=maxPage; //确保最后的超链接值不会超出最大值
	begin=1;
}else if(over>maxPage){
	begin-=over-maxPage;
	if(begin<1)begin=1;//确保首个超链接值最小是1
	over=maxPage;
}
%>

<div class='kuang'>
	<div class='nav'><% 
if(begin>1){
	out.println("<a href='?page=1'>首页</a> ");
}
for(int i=begin; i<=over; ++i){ //i就是页码
	if(i==currentPage){
		out.println("<b>"+i+"</b> ");
	}else{
		out.print("<a href='?page="+i+"'>"+i+"</a> ");
	}
}
if(over<maxPage){
	out.print("<a href='?page="+maxPage+"'>尾页</a>");
}
%>
	</div>
	<div class='content'>
<% 
try(Connection cn=DriverManager.getConnection("jdbc:mysql://localhost:3306/db", "root", "12qwas");
	PreparedStatement ps=cn.prepareStatement("select cy from chengyu limit ?,?");
	){
	ps.setInt(1, (currentPage-1)*pageSize); 
	ps.setInt(2, pageSize); //应该页面显示的记录个数
	try(ResultSet rs=ps.executeQuery()){
		for(int col=0;col<columnCount;++col){ //循环显示每列的信息
			out.println("\t\t<div class='column'>");
			for(int cy=0;cy<chengyuCountPerColumn;++cy){ //循环显示每列的成语
				if(rs.next()){
					out.println("\t\t\t<p>"+rs.getString("cy")+"</p>");
				}else{
					out.println("\t\t\t<p>　　　　</p>");
				}
			}
			out.println("\t\t</div>");
		}
	}
}

%>

	</div>
</div>
</body>
</html>

